import type { Certificate } from '@/pages/certificate/interface'
import styles from './index.module.less'

export const CertificateCard = (props: Certificate) => {
    const cardFields: {
        title: string
        value: string
    }[] = [
        { title: '培训课程', value: props.courses },
        { title: '培训时间', value: `${props.beginTime}至${props.endTime}` },
        { title: '培训地点', value: props.region },
        { title: '证书编号', value: props.certificate },
        { title: '证书序列号', value: props.serial_number },
        { title: '发证单位', value: props.certificate_region },
    ]

    return (
        <div className={styles['cert-card']}>
            <div className={styles['cert-card__sign']} />
            {cardFields.map(item => (
                <div key={item.title} className={styles['cert-card__item']}>
                    <span className={styles['cert-card__item--title']}>{item.title}</span>
                    <span className={styles['cert-card__item--value']}>{item.value || '-'}</span>
                </div>
            ))}
        </div>
    )
}
